<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core">
    <h:head>
        <title>Cadastrar Dono de Projeto</title>

    </h:head>
    <h:body>
        <h:form id="formFreelancer" prependId="false">
            <h:messages id="mensagens" globalOnly="true"/>
            <h:panelGrid columns="3">
                <h:outputLabel value="Nome:" for="nome"/>
                <h:inputText id="nome" label="Nome" value="#{freelancerBean.freelancer.nome}"/>
                <h:message for="nome"/>

                <h:outputLabel value="Email:" for="email"/>
                <h:inputText id="email" value="#{freelancerBean.freelancer.email}"/>
                <h:message for="email"/>

                <h:outputLabel value="Estado:" for="estado"/>
                <h:selectOneMenu id="estado" value="#{freelancerBean.estadoSelecionado}"
                                 converter="estadoConverter" >
                    <f:selectItem itemLabel="-- Selecione --" noSelectionOption="true"/>
                    <f:selectItems value="#{estadoBean.estados}" var="estado"
                                   itemValue="#{estado}" itemLabel="#{estado.nome}"/>
                    <f:ajax render="selectCidade"/>
                </h:selectOneMenu>
                <h:message for="estado"/>

                <h:outputLabel value="Cidade:" for="selectCidade"/>
                <h:selectOneMenu id="selectCidade" 
                                 value="#{freelancerBean.freelancer.cidade}"
                                 required="true" converter="cidadeConverter">
                    <f:selectItem itemLabel="-- Selecione --" noSelectionOption="true"/>
                    <f:selectItems value="#{freelancerBean.estadoSelecionado.cidades}" var="cidade" 
                                   itemValue="#{cidade}" itemLabel="#{cidade.nome}"/>

                </h:selectOneMenu>
                <h:message for="selectCidade"/>

                <h:outputLabel value="Descrição:" for="descricao" />
                <h:inputTextarea id="descricao" rows="5" value="#{freelancerBean.freelancer.descricao}"/>
                <h:message for="descricao"/>

                <h:outputLabel value="Login:" for="login"/>
                <h:inputText id="login" value="#{freelancerBean.freelancer.login}"/>
                <h:message for="login"/>

                <h:outputLabel value="Senha:" for="senha"/>
                <h:inputSecret id="senha" value="#{freelancerBean.freelancer.senha}"/>
                <h:message for="senha"/>

                <h:outputLabel value="Confirmar Senha:" for="confirmacaoSenha"/>
                <h:inputSecret id="confirmacaoSenha" value="#{freelancerBean.freelancer.confirmacaoSenha}"/>
                <h:message for="confirmacaoSenha"/>





            </h:panelGrid>

            <h:panelGroup>
                Habilidade:<br/>
                <h:outputLabel value="Categoria:" for="categoria"/>
                <h:selectOneMenu id="categoria" value="#{freelancerBean.categoriaSelecionada}"
                               converter="categoriaConverter"  >
                    <f:selectItem itemLabel="-- Selecione --" noSelectionOption="true"/>
                    <f:selectItems value="#{categoriaBean.categorias}" var="categoria"
                                   itemValue="#{categoria}" itemLabel="#{categoria.nome}"/>
                    <f:ajax render="selectHabilidade" />
                </h:selectOneMenu> <br/>

                <h:outputLabel value="Habilidades:" for="selectHabilidade"/>
                <h:selectOneMenu id="selectHabilidade" 
                                 value="#{freelancerBean.habilidadeSelecionada}"
                                 required="true" converter="habilidadeConverter">
                    <f:selectItem itemLabel="-- Selecione --" noSelectionOption="true"/>
                    <f:selectItems value="#{freelancerBean.categoriaSelecionada.habilidades}" var="habilidade" 
                                   itemValue="#{habilidade}" itemLabel="#{habilidade.nome}"/>
                </h:selectOneMenu>
                <h:commandButton value="Adicionar Habilidade" 
                                 action="#{freelancerBean.adicionarHabilidade(habilidade)}">
                    <f:ajax render="selectHabilidade listHabilidade"  execute="selectHabilidade"/>
                </h:commandButton>
                <br/>
                <h:selectOneListbox id="listHabilidade" value="#{freelancerBean.habilidadeRemover}" size="5">
                    <f:selectItems value="#{freelancerBean.freelancer.habilidades}" var="hab" 
                                   itemValue="#{hab}" itemLabel="#{hab.nome}"/>

                </h:selectOneListbox>
                <h:commandButton value="Remover Habilidade" action="#{freelancerBean.removerHabilidade()}">
                    <f:ajax render="listHabilidade"/>
                </h:commandButton>


            </h:panelGroup>
            <br/>
            <h:commandButton value="Confirmar Cadastro" action="#{freelancerBean.salvar()}"/>


        </h:form>
    </h:body>
</html>

